<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo--入门教程</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	*{
		margin:0;padding:0;
	}
	#div1{
		width: 300px;height: 300px;border:1px solid black;
		position: relative;
	}
	
	#close{
		position: absolute;;
		right:0px;
		top:0px;
	}


</style>
</head>
<body style=" height: 3000px">
	
	<button id="issue">发布</button>

	<div id="div1">
		<input type="text" placeholder="用户名">
		<input type="text" placeholder="密码">
		<div id="close">X</div>
	</div>
	

<script type="text/javascript">

$(function(){


//计算距离，在页面加载进入时，使div上下居中，左右也居中
	var top = $(window).scrollTop()+( $(window).height()-$("#div1").outerHeight(true) ) /2
	var left = ($(window).width()-$('#div1').outerWidth(true)) /2

	$("#div1").css({
		top:top,
		left:left
	})


//当滑动，大小变化时，top值，left值不变，div始终在上下左右居中
	$(window).on('scroll resize',function(){

		var top = $(window).scrollTop()+( $(window).height()-$("#div1").outerHeight(true) ) /2
		var left = ($(window).width()-$('#div1').outerWidth(true)) /2

		$("#div1").css({
			top:top,
			left:left
		})

	})


	$("#issue").click(function(){
		$("#div1").css('display','block')
	})
	$("#close").click(function(){
		$("#div1").css('display','none')
	})


})




</script>


</body>
</html>